<template>
  <div class="app-navbar">
    <div class="navbar-left"><slot name="app-navbar-left"></slot></div>
    <div class="navbar-center"><slot name="app-navbar-center"></slot></div>
    <div class="navbar-right"><slot name="app-navbar-right"></slot></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  }}
</script>
<style scoped>
  .app-navbar{
    display:flex;
    height:44px;
    line-height: 44px;
    position:sticky;
    top:0;
    left: 0;
    right: 0;
  }
  .navbar-left{
    width: 60px;
  }
  .navbar-right{
    width: 60px;
  }
  .navbar-center{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
  }
</style>